<template>
    <div class="white-box" v-loading.fullscreen="loading">
      <div style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-text tag="b">昵称：</el-text>
            <el-text>{{detail.nickName}}</el-text>
          </el-col>
          <el-col :span="8">
            <el-text tag="b">手机号码：</el-text>
            <el-text>{{detail.phone}}</el-text>
          </el-col>
          <el-col :span="8">
            <el-text tag="b">创建时间：</el-text>
            <el-text>{{detail.created}}</el-text>
          </el-col>
        </el-row>
      </div>
      <div style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-text tag="b">下级会员数量：</el-text>
            <el-text> {{detail.lowerMemberNum}}</el-text>
          </el-col>
        </el-row>
      </div>
      <el-tabs v-model="tabsActive" type="card" >
        <template v-for="(item, index) in tabs">
          <el-tab-pane :label="item.label" :name="item.value">

          </el-tab-pane>
        </template>
      </el-tabs>
      <lowers v-show="tabsActive === 'lowers'" :sid="sid" :detail="detail"></lowers>
      <lowers-tree v-show="tabsActive === 'tree'" :sid="sid" :detail="detail"></lowers-tree>
      <go-back />
    </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, computed} from "vue"
import { useRouter,useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"
import lowers from "./components/lowers.vue"
import lowersTree from "./components/lowersTree.vue"

const router = useRouter()
const route = useRoute()
// const sid = route.query.sid || ""
const sid = '1879768009276112897-ba5e5dd3084a4579a994bea3be9b4a63'

const { proxy } = getCurrentInstance()

const tabsActive = ref('tree')
const tabs = computed(()=>{
  return [
    {label:'下级分销商管理',value:'lowers'},
    {label:'下级买家管理',value:'sell'},
    {label:'图表展示',value:'tree'},
  ]
})
onMounted(() => {
  if(sid){
    getDetail()
  }
})

const loading = ref(false)
const detail = ref({})
const getDetail = async () => {
  loading.value = true
  await proxy.$axios
      .get(`/distributor/${sid}`)
      .then((res) => {
        loading.value = false
        if (res.data.code == 200) {
          let result = res.data.data
          detail.value = result
          // for (let key in result) {
          //   detail[key] = result[key]
          // }
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
        loading.value = false
      })


}

</script>


<style lang="less" scoped>

</style>
